import React, { Component } from 'react'
import Header from '../../components/header/header'
import { reqcartlist } from '../../http/api'
import "./Shop.less"
import { SwipeAction } from 'antd-mobile'

export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      info: []
    }
  }
  UNSAFE_componentWillMount() {
    let uid = JSON.parse(sessionStorage.getItem("info")).uid
    console.log(uid);
    reqcartlist({ uid }).then(res => {
      if (res.data.code == 200) {
        this.setState({
          info: res.data.list
        })
      }
    })
  }
  reqList = () => {
    // let id = 
    console.log();
    reqcartlist().then(res => {
      if(res.data.code==200){
        console.log(res);
      }
    })
  }
  render() {
    let { info } = this.state
    return (
      <div className='shop'>
        <Header text="购物车"></Header>
        <div className='con'>
          <p>全选：<input type="checkbox" /></p>
          {info.length > 0 ? (
            <>
              {info[0].content.map((item) => {
                return (
                  <SwipeAction
                    rightActions={[
                      {
                        key: 'delete',
                        text: '删除',
                        color: 'danger',
                      },
                    ]}
                  >
                    <div style={{ padding: 12 }}>
                      <input type="checkbox" />
                      <img src={item.img} alt="" />
                      <div>
                        <p>{item.goodsname}</p>
                        <p>{item.price}</p>
                      </div>
                      <div><button onClick={() =>this.reqList()}>-</button>{item.num}<button onClick={() => this.reqList()}>+</button></div>
                    </div>
                  </SwipeAction>




                  // <div>
                  //   <input type="checkbox" />
                  //   <img src={item.img} alt="" />
                  //   <div>
                  //     <p>{item.goodsname}</p>
                  //     <p>{item.price}</p>
                  //   </div>
                  // </div>
                )
              })}
            </>
          ) : null}
        </div>
      </div>
    )
  }
}
